import React from "react";
import styles from "./ProductCollection.module.css";
import { Row, Col, Divider, Image } from "antd";

import { ProductImage } from "../index";

interface Props {
  title: JSX.Element;
  sideImage: string;
  products: Array<unknown>;
}
interface productsProps {
  id: number;
  title: string;
  price: string;
  touristRoutePictures: {
    url: string;
  }[];
}
export const ProductCollection: React.FC<Props> = ({
  title,
  sideImage,
  products,
}) => {
  return (
    <div className={styles["productContainer"]}>
      <Divider orientation="left">{title}</Divider>
      <Row>
        <Col span={4}>
          <Image
            src={sideImage}
            alt="sider_1"
            className={styles["side-image"]}
          />
        </Col>
        <Col span={20}>
          <Row>
            <Col span={12}>
              <ProductImage
                id={(products as Array<productsProps>)[0].id}
                size={"large"}
                title={(products as Array<productsProps>)[0].title}
                imageUrl={(products as Array<productsProps>)[0].touristRoutePictures[0].url}
                price={(products as Array<productsProps>)[0].price}
              />
            </Col>
            <Col span={12}>
              <Row>
                <Col span={12}>
                  <ProductImage
                    id={(products as Array<productsProps>)[1].id}
                    size={"small"}
                    title={(products as Array<productsProps>)[1].title}
                    imageUrl={(products as Array<productsProps>)[1].touristRoutePictures[0].url}
                    price={(products as Array<productsProps>)[1].price}
                  />
                </Col>
                <Col span={12}>
                  <ProductImage
                    id={(products as Array<productsProps>)[2].id}
                    size={"small"}
                    title={(products as Array<productsProps>)[2].title}
                    imageUrl={(products as Array<productsProps>)[2].touristRoutePictures[0].url}
                    price={(products as Array<productsProps>)[2].price}
                  />
                </Col>
              </Row>
              <Row>
                <Col span={12}>
                  <ProductImage
                    id={(products as Array<productsProps>)[3].id}
                    size={"small"}
                    title={(products as Array<productsProps>)[3].title}
                    imageUrl={(products as Array<productsProps>)[3].touristRoutePictures[0].url}
                    price={(products as Array<productsProps>)[3].price}
                  />
                </Col>
                <Col span={12}>
                  <ProductImage
                    id={(products as Array<productsProps>)[4].id}
                    size={"small"}
                    title={(products as Array<productsProps>)[4].title}
                    imageUrl={(products as Array<productsProps>)[4].touristRoutePictures[0].url}
                    price={(products as Array<productsProps>)[4].price}
                  />
                </Col>
              </Row>
            </Col>
          </Row>
          <Row>
            <Col span={6}>
              <ProductImage
                id={(products as Array<productsProps>)[5].id}
                size={"small"}
                title={(products as Array<productsProps>)[5].title}
                imageUrl={(products as Array<productsProps>)[5].touristRoutePictures[0].url}
                price={(products as Array<productsProps>)[5].price}
              ></ProductImage>
            </Col>
            <Col span={6}>
              <ProductImage
                id={(products as Array<productsProps>)[6].id}
                size={"small"}
                title={(products as Array<productsProps>)[6].title}
                imageUrl={(products as Array<productsProps>)[6].touristRoutePictures[0].url}
                price={(products as Array<productsProps>)[6].price}
              ></ProductImage>
            </Col>
            <Col span={6}>
              <ProductImage
                id={(products as Array<productsProps>)[7].id}
                size={"small"}
                title={(products as Array<productsProps>)[7].title}
                imageUrl={(products as Array<productsProps>)[7].touristRoutePictures[0].url}
                price={(products as Array<productsProps>)[7].price}
              ></ProductImage>
            </Col>
            <Col span={6}>
              <ProductImage
                id={(products as Array<productsProps>)[8].id}
                size={"small"}
                title={(products as Array<productsProps>)[8].title}
                imageUrl={(products as Array<productsProps>)[8].touristRoutePictures[0].url}
                price={(products as Array<productsProps>)[8].price}
              ></ProductImage>
            </Col>
          </Row>
        </Col>
      </Row>
    </div>
  );
};
